<template>
	<view class="my">
		<view class="header">
			<view class="total-balance">
				<view class="total-balance-title">我的工资</view>
				￥<u-count-to 
					:start-val="0" 
					:end-val="totalBalance" 
					:decimals="2" 
					separator=","
					color="#fff"
					font-size="70"
				></u-count-to>
			</view>
			
		
			
			
		</view>
		
		<view class="row-item-list">
			<u-cell-group>
				<u-cell-item 
					icon="rmb-circle" 
					title="收入明细" 
					
					@click="wallet_list"
				></u-cell-item>
				
				
			</u-cell-group>
			<u-cell-group>
				<u-cell-item 
					icon="rmb-circle" 
					title="支出明细" 
					
					@click="wallet_list2"
				></u-cell-item>
				
				
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 钱包数据
				obj: null,
				salaryBalance:0,
			}
		},
		async onLoad(){
			const that = this;
			
			// 设置-导航栏标题为车队名称
			uni.setNavigationBarTitle({ title: '' });
			
			await that.getLuserInfo();
		},
		computed: {
			// 总资产
			totalBalance: function(){
				let that = this
				let res = 0;
				if(that.salaryBalance){
					
					let num = parseFloat(that.salaryBalance)
					console.log(num)
					res = num.toFixed(2);
				}
				
				return res;
			},
			
			
			
		},
		methods: {
			/** 获取-登录用户信息 */
			async getLuserInfo(){
				const that = this, U = that.U;
				
				let res = await that.$u.api.getLuserInfo();
				if(res.code == 1) {
					that.salaryBalance = res.data.salaryBalance
				}
			},
			wallet_list(){
				uni.navigateTo({url: '/my-man/wallet_list/wallet_list'});
			},
			wallet_list2(){
				uni.navigateTo({url: '/my-man/wallet_list2/wallet_list2'});
			},
			
			
			
		}
	}
</script>

<style lang="less">
	.my{
		height: 100vh;
		background: #f3f3f3;
		
		.header{
			overflow: hidden;
			height: 300rpx;
			background: #2979ff;
			
			.total-balance-title{
				margin-top: 80rpx;
				font-size: 30rpx;
				color: #fff;
				width: 100%;
				text-align: center;
			}
			
			.total-balance{
				font-size: 60rpx;
				color: #fff;
				width: 100%;
				text-align: center;
				margin-bottom: 20rpx;
			}
			
			.recharge-btn{
				display: flex;
				justify-content: center;
				padding-bottom: 20rpx;
			}
			
			.credit-limit{
				margin-top: 10rpx;
				border-top: 2rpx solid #eeeeee;
				padding: 20rpx;
				
				.cl-title{
					font-size: 30rpx;
					font-weight: 600;
					padding-bottom: 20rpx;
					color: #ffffff;
				}
				
				.cl-items{
					display: flex;
					justify-content: space-around;
					
					.cl-line{
						background-color: #eeeeee;
						width: 2rpx;
						margin: 0 20rpx;
					}
					
					.cl-item{
						text-align: left;
						color: #ffffff;
						flex: auto;
						.cl-item-title{
							padding-bottom: 10rpx;
						}
						.cl-item-money{
							font-weight: 600;
						}
					}
				}
				
				
			}
		}
		
		.row-item-list{
			// margin: 0rpx 10rpx;
			background: #fff;
			margin-top: 10rpx;
			border-radius: 14rpx;
		}
	}
</style>
